import React, { useState } from 'react';
    import { Link } from 'react-router-dom';
    import routes from '../../router/routeConfig';
    import './index.css';

    const ForgotPasswordPage = () => {
      const [email, setEmail] = useState('');
      const [isSubmitted, setIsSubmitted] = useState(false);
      const [error, setError] = useState('');
      const [isLoading, setIsLoading] = useState(false);

      const handleSubmit = async (e) => {
        e.preventDefault();
        
        if (!email) {
          setError('请输入您的电子邮箱');
          return;
        }
        
        setIsLoading(true);
        setError('');
        
        try {
          // 在实际应用中，这里会调用API发送重置密码邮件
          // const response = await api.post('/auth/forgot-password', { email });
          
          // 模拟API调用延迟
          await new Promise(resolve => setTimeout(resolve, 1000));
          
          // 显示成功消息
          setIsSubmitted(true);
        } catch (err) {
          setError('发送重置密码邮件失败，请重试');
          console.error('重置密码错误:', err);
        } finally {
          setIsLoading(false);
        }
      };

      return (
        <div className="container auth-page">
          <div className="auth-card">
            <div className="auth-header">
              <h1><i className="fas fa-key"></i> 找回密码</h1>
              <p>我们将向您发送重置密码的链接</p>
            </div>
            
            {error && (
              <div className="auth-error">
                <i className="fas fa-exclamation-circle"></i> {error}
              </div>
            )}
            
            {isSubmitted ? (
              <div className="success-message">
                <i className="fas fa-check-circle"></i>
                <h3>邮件已发送！</h3>
                <p>我们已向 {email} 发送了一封包含重置密码链接的邮件。请检查您的收件箱，并按照邮件中的说明进行操作。</p>
                <p className="note">如果您没有收到邮件，请检查垃圾邮件文件夹，或者 <button onClick={() => setIsSubmitted(false)} className="resend-link">重新发送</button></p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="auth-form">
                <div className="form-group">
                  <label htmlFor="email">电子邮箱</label>
                  <div className="input-with-icon">
                    <i className="fas fa-envelope"></i>
                    <input
                      type="email"
                      id="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="请输入您的注册邮箱"
                      required
                    />
                  </div>
                </div>
                
                <button 
                  type="submit" 
                  className="auth-button" 
                  disabled={isLoading}
                >
                  {isLoading ? (
                    <>
                      <i className="fas fa-spinner fa-spin"></i> 发送中...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-paper-plane"></i> 发送重置链接
                    </>
                  )}
                </button>
              </form>
            )}
            
            <div className="auth-footer">
              <p>
                记起密码了？ <Link to={routes.login}>返回登录</Link>
              </p>
              <p>
                <Link to={routes.home} className="back-to-home">
                  <i className="fas fa-arrow-left"></i> 返回首页
                </Link>
              </p>
            </div>
          </div>
        </div>
      );
    };

    export default ForgotPasswordPage;
